<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>注册页面</h1>
  <form action="">
      <input type="text" name="username" @blur="check()"  placeholder="用户名">{{info}}<br>
      <input type="text" name="password"  placeholder="密码"><br>
      <input type="button" value="注册" @click="reg()"><br>
  </form>
<!--引入axios和vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
  <script>
      let v = new Vue({
          el:"form",
          data:{
              info:""
          },
          methods:{
              reg:function () {
                  //通过form表单创建一个表单数据对象，
                  //这种写法会自动将表单中的参数装进data里面
                  let data = new FormData(document.querySelector("form"));
                  /*data.append("username",v.username);
                  data.append("password",v.password);*/
                  axios.post("/reg",data).then(function (response) {
                      alert(response.data);
                  })
              },
              check:function () {
                  //发起异步请求
                  let data = new FormData(document.querySelector("form"));
                  axios.post("/check",data).then(function (response) {
                      if(response.data==1){
                          v.info="用户名可用!";
                      }else{
                          v.info="用户名不可用!";
                      }
                  })
              }
          }
      })
  </script>
</body>
</html>